<template>
  <div>
    <!-- 搜索 -->
    <div class="searchBox">
      <span class="hint" style="margin-left: 15px">申请标题</span>
      <el-input clearable v-model="searchForm.keywords" class="input" placeholder="请输入标题"></el-input>
      <span class="hint">状态</span>
      <el-select style="margin-right: 20px; width: 10%" v-model="searchForm.is_verify" clearable placeholder="请选择">
        <el-option v-for="item in statusList" :key="item" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-button class="searchBtn" type="primary" @click="searchBtn">搜索</el-button>
      <el-button type="warning" @click="refreshBtn">重置</el-button>
      <el-button type="success" @click="onDownExcel">导出</el-button>
    </div>
    <page-main>
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="tableDataLoading"
        :default-sort="{ prop: 'id', order: 'ascending' }"
      >
        <el-table-column width="80" label="id" prop="id" sortable></el-table-column>
        <el-table-column label="申请标题" prop="title"> </el-table-column>
        <el-table-column label="所属单位" prop="unit_name"> </el-table-column>
        <el-table-column label="联系人" prop="contact_name"> </el-table-column>
        <el-table-column label="联系电话" prop="contact_phone"> </el-table-column>
        <el-table-column label="未审核时间" prop="no_audit_time" width="165"> </el-table-column>
        <el-table-column label="申请报告" prop="images">
          <template #default="scope">
            <span v-if="scope.row.images.length >= 1" style="color: #67c23a">已上传</span>
            <span v-else style="color: #f56c6c">未上传</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="审核原因" prop="area_verify_reason"> </el-table-column>
        <el-table-column label="审核用户" prop="area_verify_user_name"> </el-table-column>
        <el-table-column label="审核人电话" prop="area_verify_phone"> </el-table-column>
        <el-table-column label="审核时间" prop="area_verify_time">
            <template #default="scope">
                <span> {{ formatDate(scope.row.area_verify_time) }} </span>
            </template>
        </el-table-column> -->
        <el-table-column label="状态" prop="is_verify">
          <template #default="scope">
            <el-tag v-if="scope.row.is_verify == 1">已审核</el-tag>
            <el-tag v-else-if="scope.row.is_verify == 2" type="warning">审核失败</el-tag>
            <el-tag v-else type="danger">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="area_verify_time">
          <template #default="scope">
            <el-button @click="lookLog(scope.row)" size="mini" :type="scope.row.is_verify != 1 ? 'primary' : ''">{{
              scope.row.is_verify == 1 ? '查看' : '审核'
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :current-page="pagination.page"
          :total="total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          class="pagination"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </page-main>
  </div>
</template>
<script>
// 分页
import paginationMixin from '@/mixins/pagination'
export default {
  // 分页
  mixins: [paginationMixin],
  data() {
    return {
      upDataUrl: import.meta.env.DEV ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
      tableData: [],
      tableDataLoading: false,
      //   area_name: '',
      // 总条数
      total: 0,
      searchForm: {
        keywords: '',
        is_verify: 0
      },
      searchParams: {},
      // 审核状态
      statusList: [
        { label: '未审核', value: 0 },
        { label: '已审核', value: 1 },
        { label: '审核失败', value: 2 }
      ]
    }
  },
  mounted() {},
  created() {
    this.getDataList()
  },
  methods: {
    onDownExcel() {
      this.$api
        .post(
          '/unit/FirePower/listsExcl',
          {
            ...this.searchForm
          },
          {
            responseType: 'blob'
          }
        )
        .then((res) => {
          const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
          })
          if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
          } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
          }
        })
    },
    getDataList() {
      this.tableDataLoading = true
      let params = {
        rows: this.pagination.size,
        page: this.pagination.page,
        ...this.searchForm
      }
      this.$api
        .post('/unit/FirePower/lists', params)
        .then((res) => {
          this.tableData = res.data.lists
          this.total = res.data.total
        })
        .finally(() => {
          this.tableDataLoading = false
        })
    },
    // 查看日志
    lookLog(row) {
      this.$router.push({
        name: 'thermalPowerLog',
        query: {
          id: row.id
        }
      })
    },
    // 搜索
    searchBtn() {
      this.pagination.page = 1
      this.searchParams = this.searchForm
      this.getDataList()
    },
    // 重置
    refreshBtn() {
      this.pagination.page = 1
      this.searchParams = {}
      this.searchForm = {
        keywords: '',
        is_verify: ''
      }
      this.getDataList()
    },
    // 时间转换
    formatDate(timeStamp, format) {
      if (!timeStamp) return ''
      timeStamp = +timeStamp
      var date = new Date(timeStamp)
      // 年月日
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var day = date.getDate()
      day = day < 10 ? '0' + day : day
      // 时分秒
      var hour = date.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var min = date.getMinutes()
      min = min < 10 ? '0' + min : min
      var sec = date.getSeconds()
      sec = sec < 10 ? '0' + sec : sec
      if (format) {
        format = format.replace('Y', year)
        format = format.replace('M', month)
        format = format.replace('D', day)
        format = format.replace('h', hour)
        format = format.replace('m', min)
        format = format.replace('s', sec)
        return format
      } else {
        return year + '-' + month + '-' + day
      }
    }
  }
}
</script>
<style scoped lang="scss">
.block {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  :deep(.el-pagination__total) {
    margin-left: 10px;
  }
}
.searchBox {
  margin: 20px;
  display: flex;
  background-color: #fff;
  padding: 20px;
  .input {
    width: 10%;
    margin-right: 15px;
  }
  .hint {
    line-height: 40px;
    margin-right: 10px;
  }
  .searchBtn {
    background-color: #2d8cf0;
    color: #fff;
  }
}
</style>
